<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/main.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/element.css">
    <!-- <link rel="stylesheet" href="../css/element.css"> -->
    <link rel="stylesheet" href="../css/fonts/element-icons.woff">
    <link rel="stylesheet" href="../css/product/product_detail.css">
    <link rel="stylesheet" href="../css/element-icons.woff">


    <title>商品详情-周期购</title>
</head>

<body>
    <div id="app" v-cloak>
        <headers></headers>
        <side_nav></side_nav>
        <!-- search -->
        <div class="search wrap">
            <logo></logo>
            <searchs></searchs>

            <car_box></car_box>

        </div>
        <!-- 商品分类 -->
        <div class="class_box wrap">
            <div class="sub_nav_box">
                <div class="product_class fl">
                    商品分类
                </div>
                <ul class="sub_nav fl">
                    <li @click='seckilling'>限时秒杀</li>
                    <li @click='group_buy'>团购优惠</li>
                    <li @click='cyc_buy'>周期购</li>
                    <li @click='integral'>积分商城</li>
                </ul>
            </div>
        </div>

        <div class="all_product wrap">
            全部商品&gt;{{mdseSpu.spuName}}
        </div>

        <!-- 产品 -->
        <div class="product wrap">
            <div class="">
                <div class="product_img fl">
                    <img :src="mdseSpu.coverImg" alt="">
                    <!-- <div class="active_over"> -->
                    <!-- 据活动结束还剩<div class="over_time"><span>02</span>:<span>36</span>:<span>17</span></div> -->
                    <!-- </div> -->
                    <div class="img_list fl">
                        <ul>
                            <li class="cursor" v-for='(item,index) in imgs' @click='change_img(item)'>
                                <img :src="item" alt="">
                            </li>
                        </ul>
                    </div>
                </div>

                

                <div class="product_detail fl">
                    <p class="product_tit">{{mdseSpu.spuName}}</p>
                    <div class="business">
                        <img :src="shopInfo.shopLogo" alt="">
                        <span class="business_name">{{shopInfo.shopName}}</span>
                        <el-progress class="star_num" :text-inside="true" :stroke-width="4" :percentage="i" color="rgba(204,24,24,1)"></el-progress>
                        <span class="star_text">{{is}}分</span>
                        <!-- <div class="collection fr">
                            收藏
                            <img src="../images/icon_star.png" class="collection_star cursor fr" @click='collection(mdseSpu.id)' alt="" v-if='collectStatus==1'>
                            <img src="../images/icon_shoucang.png" class="collection_star cursor fr" @click='collection(mdseSpu.id)' alt="" v-else='collectStatus==0'>
                        </div> -->
                    </div>
                    
                    <div class="product_detail_tit">
                        <div class="tit fl pirce">价格<i> </i></div>
                        <div class="price_detail fl"><span>￥</span>{{show_pirce}}</div>
                        <div class="salesPrice fl">￥{{salesPrice}}</div>
                    </div>
                  
                    <!-- <div class="product_detail_tit">
                        <div class="tit fl discount_ticket">优惠券<i> </i></div>
                        <div class="discount_list">
                            <ul>
                                <li class="discount_item" v-for='(item,index) in listCouponsNoToken' v-if='index<4'>满{{item.spendMoney}}减{{item.couponMoney}}</li>
                                <li class="more_discount cursor" @click='show_popup'>更多 &gt;</li>
                            </ul>
                        </div>
                    </div> -->
                    <!-- <div class="product_detail_tit">
                        <div class="tit fl">库存<i> </i></div>
                        <div class="promotion fl">{{stock}}</div>
                    </div> -->

                    <!-- 
                    <div class="product_detail_tit">
                        <div class="tit fl send_address">配送地<i> </i></div>
                        <select class="check_address">
                            <option value="volvo">天津</option>
                        </select>
                        <span class="send_money">运费：10元</span>
                    </div> -->

                    <!-- <div class="product_detail_tit">
                        <div class="tit fl">促销<i> </i></div>
                        <div class="promotion fl">8折</div>
                    </div> -->
                    <div class="product_detail_tit" v-for='(item,indexs) in chooseSkuList'>
                        <div class="shuxing fl discount_ticket">{{item.specInfo}}<i> </i></div>
                        <div class="discount_list">
                            <ul>
                                <li class="style_item" v-for='(style_items,index) in item.specValues' @click='style_item(index,indexs,item.specId)'
                                    :class="{active:item.myindex==index}">{{style_items.specValueInfo}}</li>
                            </ul>
                        </div>
                    </div>

                    <div class="product_detail_tit">
                        <div class="tit fl discount_ticket">周期<i> </i></div>
                        <div class="discount_list">
                            <ul>
                                <li class="fl style_item" v-for='(item,index) in periodBuyDetail' @click='cyc_btn(item.id,index)'
                                    :class="{active:zqindex==index}">{{item.periodNum}}</li>
                                <li class="fl send_cyc">{{w_m}}</li>
                            </ul>
                        </div>
                        <br>
                    </div>
                    <div class="fl"></div>

                    <div class="product_detail_tit">
                        <div class="tit fl send_address">数量<i> </i></div>
                        <el-input-number v-model="nums" @change="handleChange" size="mini" :min="1" label=""></el-input-number>
                        <!-- <span class="send_money">运费：10元</span> -->
                    </div>

                </div>
            </div>
            <div class="clear_both">

                <div class="buy_box fr">
                    <div class="alone_btn cursor fl" @click='buy_one'>
                        <div>￥{{mdseSpu.showPrice}}</div>
                        <div>单独购买</div>
                    </div>
                    <div class="buy_now cursor" @click='go_cyc_buy'>
                        立即购买
                    </div>
                </div>
            </div>
        </div>



        <!-- 优惠组合
        <div class="discount_box wrap">
            <div class="discount_tit">
                <span>优惠组合</span>
            </div>
            <div class="group_list clear_both">
                <div class="group_item_wrap fl">
                    <div class="group_item">

                    </div>
                    <div class="item_name">
                        QXD-25 小双槽qxd细度计
                        25微米颗粒刮板细度计
                    </div>
                </div>
                <div class="item_add fl">
                    +
                </div>
                <div class="group_item_wrap fl">
                    <div class="group_item">

                    </div>
                    <div class="item_name">
                        QXD-25 小双槽qxd细度计
                        25微米颗粒刮板细度计
                    </div>
                    <div class="group_num"><span>￥</span>56000</div>
                </div>
                <div class="group_item_wrap fl">
                    <div class="group_item">

                    </div>
                    <div class="item_name">
                        QXD-25 小双槽qxd细度计
                        25微米颗粒刮板细度计
                    </div>
                    <div class="group_num"><span>￥</span>56000</div>
                </div>
                <div class="group_item_wrap fl">
                    <div class="group_item">

                    </div>
                    <div class="item_name">
                        QXD-25 小双槽qxd细度计
                        25微米颗粒刮板细度计
                    </div>
                    <div class="group_num"><span>￥</span>56000</div>
                </div>
                <div class="deng fl">=</div>
                <div class="group_money fl">
                    <div class="money_tit">组合价</div>
                    <div class="group_num"><span>￥</span>56000</div>
                    <div class="group_btn">立即购买</div>
                </div>
            </div>
        </div> -->

        <div class="sort wrap">
            <div class="sort_list">
                <!-- <li v-for="(item,index) in tabsParam" @click="toggleTabs(index)" :class="{active:index!=nowIndex}">{{item}}</li> -->
                <p :class="{active:nowIndex===0}" class="fl" @click="introduce">商品介绍</p>
                <p :class="{active:nowIndex===1}" class="fl" @click="packing">规格与包装</p>
                <p :class="{active:nowIndex===2}" class="fl" @click="comment">商品评价{{evalute_num}}</p>
            </div>
        </div>
        <!-- 商品介绍 -->
        <div class="product_introduce ql-editor details_wrap wrap" v-show="nowIndex===0" v-html='details.details'>
        </div>
        <!-- 规格与包装 -->
        <div class="packing wrap ql-editor details_wrap" v-show="nowIndex===1">
            <div class="packing_item" v-for='(item,index) in spuPropertyList'>
                <ul>
                    <li>{{item.propertyName}}：{{item.value}}</li>
                </ul>
            </div>
        </div>


        <!-- 评价 -->
        <div class="comment_box wrap" v-show="nowIndex===2">
            <div class="comment_nav">
                <ul>
                    <li :class="{active:evalute_index==0}" @click='gcl(0,1)'>全部({{evalute_num}})</li>
                    <li :class="{active:evalute_index==4}" @click='gcl(4,1)'>有图({{youtu}})</li>
                    <li :class="{active:evalute_index==3}" @click='gcl(3,1)'>好评({{haoping}})</li>
                    <li :class="{active:evalute_index==2}" @click='gcl(2,1)'>中评({{zhongping}})</li>
                    <li :class="{active:evalute_index==1}" @click='gcl(1,1)'>差评({{chaping}})</li>
                </ul>
            </div>
            <div class="comment_containe">
                <div class="comment_item" v-for='item in gcl_list'>
                    <div class="left_box fl">
                        <div class="comment_person">
                            <div class="person_pic fl">
                                <img :src="item.userVia" alt="">
                            </div>
                            <div class="person_name fl">{{item.userNickname}}</div>
                        </div>
                    </div>
                    <div class="fl">
                        <div class="star_list">
                            <el-rate v-model="item.starShowAvg" disabled text-color="#CC1818">
                            </el-rate>

                        </div>
                        <div class="comment_text">{{item.content}}</div>
                        <div class="comment_img_list">
                            <ul>
                                <li v-for='item in item.img_list'>
                                    <img :src="item" alt="">
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="integral_page wrap">
                <el-pagination background @current-change="handleCurrentChanges" :page-size="10" :current-page="currentPage"
                    layout="prev, pager, next" :total="evalute_num" class="page_list">
                </el-pagination>
            </div>
        </div>
        <div class="wrap clear_both">
            <productfooter></productfooter>
        </div>
    </div>


    <script src="../js/axios.js"></script>
    <script src="../js/qs.js"></script>
    <script src="../js/browser.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/element.js"></script>
    <script src="../js/main.js"></script>
    <script type="text/babel">
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    books:20,
                    nums: 1,
                    comments:5,
                    tabsParam:['商品介绍','规格与包装','商品评价'],
                    nowIndex:0,
                    car_active:false,groups:3,
                    style_num:0,
                    style_list:['QXD-25','QXD-26','QXD-27','QXD-28'],
                    // 详情
                    spuId:'',
                    periodBuyId:'',
                    imgs:'',
                    mdseSpu:'',
                    collectStatus:'',
                    details:'',
                    chooseSkuList:'',
                    spuPropertyList:'',
                    salesPrice:'',
                    specValueIds:'',
                    show_pirce:'',
                    listCouponsNoToken:'',
                    ticket_list:'',
                    popup_show:false,
                    total:10,
                    shopInfo:'',
                    stock:'',
                    skuInfo:'',
                    periodBuyDetail:'',
                    // 评价
                    chaping:0,
                    youtu:0,
                    haoping:0,
                    zhongping:0,
                    evalute_index:0,
                    gcl_list:'',
                    evalute_num:0,
                    i:0,
                    is:0,
                    periodBuyInfo:'',
                    w_m:'',
                    buydetail_id:'',
                    skuid:'',
                    zqindex:0,
                    currentPage:1,
                    evaluate:'',
                    brandInfo:''
                };
            },
            components: {
                
            },
            mounted() {
                this.periodBuyId =  this.GetQueryString().periodBuyId
                this.spuId =  this.GetQueryString().spuId
                this.periodMdseDetails()
                // this.gcl(0,1)
            },
            methods: {
                handleCurrentChanges(value){
                    this.gcl(this.evaluate,value)
                    this.currentPage = value
                },
                go_cyc_buy(){
                    // window.location.href='cyc_buy.html?id='+skuid+'&num'
                    window.location.href='cyc_buy.html?id='+this.skuid+'&num='+this.nums
                },
                // 评论列表
                gcl(status,page){
                    this.evaluate = status
                    this.currentPage = 1
                    axios({
                        method:"POST",
                        url:base_url + "/occ/gcl",
                        data:Qs.stringify({
                            pageSize:10,
                            pageNum:page,
                            status:status,
                            goodsId:this.mdseSpu.id
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.evalute_index = status     
                        // app.evalute_num = res.data.data.list.total
                        // app.evalute_num = 100
                        app.gcl_list = res.data.data.list.list.map(function (item) {
                            var new_item = item
                            if (item.images!=''&&item.images!=undefined&&item.images!=null) {
                                new_item.img_list = item.images.split(',')
                            }
                            return new_item
                        })
                        console.log(app.gcl_list)
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                // 获取评价数量
                gclnum(){
                    axios({
                        method:"POST",
                        url:base_url + "/occ/gcsc",
                        data:Qs.stringify({
                            goodsId:this.mdseSpu.id
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        var object = res.data.data.data
                        app.evalute_num = object.qb
                        app.chaping = object.cp
                        app.youtu = object.yt
                        app.haoping = object.hp
                        app.zhongping = object.zp

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                // 详情
                periodMdseDetails(){
                    axios({
                        method:"POST",
                        url:base_url + "/web/mdse/special/periodMdseDetails",
                        data:Qs.stringify({
                            spuId:this.spuId,
                            periodBuyId:this.periodBuyId,
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        console.log(res.data.data)
                        app.brandInfo = res.data.data.brandInfo
                        app.shopInfo = res.data.data.shopInfo
                        app.mdseInfo = res.data.data.mdseInfo
                        app.mdseSpu = res.data.data.mdseInfo.mdseSpu
                        app.shopId = res.data.data.shopInfo.id
                        app.collectStatus = res.data.data.collectStatus
                        // app.periodBuyDetail = res.data.data.periodBuyDetail.map(function(item) {
                        //     let newItem=item
                        //     newItem.myindex=0
                        //     return  newItem
                        // });
                        app.i = Number(res.data.data.shopInfo.shopPoint)*20
                        app.is =res.data.data.shopInfo.shopPoint
                        app.periodBuyDetail = res.data.data.periodBuyDetail
                        app.periodBuyDetail.myindex = 0
                        app.periodBuyInfo = res.data.data.periodBuyInfo
                        app.buydetail_id = res.data.data.periodBuyDetail[0].id
                        if (res.data.data.periodBuyInfo.distributionPeriod==2) {
                            app.w_m = '按月(每月'+res.data.data.periodBuyInfo.distributionTimeMonth+'号发货）'
                        }else if (res.data.data.periodBuyInfo.distributionPeriod==1) {
                            app.w_m = '按周(每周'+res.data.data.periodBuyInfo.distributionTimeWeek+'发货）'
                        }
                        if (res.data.data.mdseInfo.details==''||res.data.data.mdseInfo.details==undefined||res.data.data.mdseInfo.details==null) {
                            app.details =''
                        }else{
                            app.details = res.data.data.mdseInfo.details
                        }
                        app.spuPropertyList = res.data.data.mdseInfo.spuPropertyList
                        app.chooseSkuList = res.data.data.chooseSkuList.map(function(item) {
                            let newItem=item
                            newItem.myindex=0
                            return  newItem
                        });
                        var imgs = res.data.data.mdseInfo.mdseSpu.imgs.slice(0,res.data.data.mdseInfo.mdseSpu.imgs.length-1)
                        app.imgs = imgs.split(',')
                        console.log(app.imgs)
                        // app.listCoupons(1)
                        // app.listCouponsNoTokens(1)
                        app.sku()
                        app.gcl(0,1)
                        app.gclnum()
                        app.style_item(0,0)
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                // // 获取分数
                
                // gcas(){
                //     axios({
                //         method:"POST",
                //         url:base_url + "/occ/gcas",
                //         data:Qs.stringify({
                //             goodsId:this.mdseSpu.id
                //         }),
                //         headers:{
                //             'Content-Type':'application/x-www-form-urlencoded',
                //             "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                //         }
                //     })
                //     .then(function (res) {
                //         console.log(res.data)
                //         if (res.data.data.i==null||res.data.data.i==''||res.data.data.i==undefined) {
                //             app.i = 0
                //         }else{
                //             app.i = res.data.data.i
                //         }
                //     })
                //     .catch(function (error) {
                //         console.log(error);
                //     });
                // },
                // 点击切换图片
                change_img(item){
                    this.mdseSpu.coverImg = item
                },
                // 进入时默认的sku
                sku(){
                    var specValueIds = ''
                    for (let i = 0; i < this.chooseSkuList.length; i++) {
                        specValueIds += this.chooseSkuList[i].specValues[0].specValue+','
                    }
                    specValueIds = specValueIds.substring(0, specValueIds.lastIndexOf(','))  ;
                    this.specValueIds = specValueIds.split(',')
                    axios({
                        method:"POST",
                        url:base_url + "/web/mdse/special/periodSkuInfoBySpec",
                        data:Qs.stringify({
                            periodBuyId:this.periodBuyId,
                            specValueIds:specValueIds,
                            spuId:this.spuId,
                            periodBuyDetailId:this.buydetail_id
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.skuid = res.data.data.periodBuyDetailSku.id
                        // console.log(res.data.data.periodBuyDetailSku)
                        app.show_pirce = res.data.data.periodBuyDetailSku.goodsPrice
                        app.salesPrice = res.data.data.periodBuyDetailSku.salesPrice
                        // app.stock = res.data.data.skuInfo.stock
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                // 截取url
                GetQueryString() {
                    var obj = new Object()
                    var scan_url = window.location.href.split('?')[1];
                    var strs = scan_url.split('&');
                    for(var x in strs) {
                        var arr = strs[x].split('=');
                        obj[arr[0]] = arr[1]
                    }
                    return obj
                },
                // 领取优惠券
                show_popup(){
                    if (localStorage.getItem('wACCESS_TOKEN') == '' ||localStorage.getItem('wACCESS_TOKEN') == undefined ||localStorage.getItem('wACCESS_TOKEN') == null) {
                        app.$message.success('请登录');
                    }else{
                        this.popup_show = !this.popup_show
                    }
                },
                // 优惠券
                listCoupons(page){
                    axios({
                        method:"POST",
                        url:base_url + "/coupons/listCoupons",
                        data:Qs.stringify({
                            shopId:this.shopId,
                            pageNum:page,
                            pageSize:this.ticket_size
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.total = res.data.data.list.total
                        app.ticket_list = res.data.data.list.list
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                listCouponsNoTokens(page){
                    axios({
                        method:"POST",
                        url:base_url + "/coupons/listCouponsNoToken",
                        data:Qs.stringify({
                            shopId:this.shopId,
                            pageNum:page,
                            pageSize:this.ticket_size
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.listCouponsNoToken = res.data.data.list.list
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                
               


                // 显示购物车               
                go_shop_car(){                     
                    window.location.href='../product/shop_car.html'  
                },
                car_box(){
                    this.car_active = !this.car_active
                },
                handleChange(value) {
                    console.log(value);
                },
                introduce:function(index){
                    this.nowIndex = 0
                },
                packing:function(index){
                    this.nowIndex = 1
                },
                comment:function(index){
                    this.nowIndex = 2
                },
                // sku
                style_item(index,indexs) {
                    app.chooseSkuList[indexs].myindex=index
                    var specValueIds = this.specValueIds
                    specValueIds[indexs] = app.chooseSkuList[indexs].specValues[index].specValue
                    specValueIds = specValueIds.join(',')
                    this.specValueIds = specValueIds.split(',')
                    console.log(this.specValueIds)
                    axios({
                        method:"POST",
                        url:base_url + "/web/mdse/special/periodSkuInfoBySpec",
                        data:Qs.stringify({
                            periodBuyId:this.periodBuyId,
                            specValueIds:specValueIds,
                            spuId:this.spuId,
                            periodBuyDetailId:this.buydetail_id
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        console.log(res.data.data.periodBuyDetailSku)
                        // app.skuInfo = res.data.data.skuInfo
                        app.show_pirce = res.data.data.periodBuyDetailSku.goodsPrice
                        app.salesPrice = res.data.data.periodBuyDetailSku.salesPrice
                        app.skuid = res.data.data.periodBuyDetailSku.id
                        // app.stock = res.data.data.skuInfo.stock
                        // app.skuid = res.data.data.skuInfo.id
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                cyc_btn(id,index){
                    this.zqindex = index
                    this.buydetail_id = id
                    var specValueIds = this.specValueIds
                    specValueIds = specValueIds.join(',')
                    this.specValueIds = specValueIds.split(',')
                    axios({
                        method:"POST",
                        url:base_url + "/web/mdse/special/periodSkuInfoBySpec",
                        data:Qs.stringify({
                            periodBuyId:this.periodBuyId,
                            specValueIds:specValueIds,
                            spuId:this.spuId,
                            periodBuyDetailId:this.buydetail_id
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        console.log(res.data.data.periodBuyDetailSku)
                        // app.skuInfo = res.data.data.skuInfo
                        app.show_pirce = res.data.data.periodBuyDetailSku.goodsPrice
                        // app.stock = res.data.data.skuInfo.stock
                        app.skuid = res.data.data.periodBuyDetailSku.id
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                seckilling(){
                    window.location.href='../discount/seckilling.html'
                },
                cyc_buy(){
                    window.location.href='../discount/cyc_buy.html'
                },
                group_buy(){
                    window.location.href='../discount/group_buy.html'
                },
                integral(){
                    window.location.href='../integral/integral.html'
                },
                buy_one(){
                    window.location.href='product_detail.html?id='+this.mdseSpu.id
                }
            }
        })
    </script>
</body>

</html>